<!-- 我的积分 -->
<template>
  <view class="my-integral-padding ">
	  
    <view class="page_one" v-if="is_shenqing==false">
      <!-- 积分统计 -->
      <Integral :points="points" :this_month="this_month" @calc="integral" @shenqing="tixian_sq"/>
	  
	  <view style="width: 100%; display: flex; height: 150rpx;margin-top: 40rpx;">
		  <view style="margin-left: 0%;" class="kuang" :class="lang=='ru'?'f10':''">
			  <view style="font-weight: 500;width: 100%; height: 60rpx;line-height: 60rpx;" v-if="lang!='ru'">{{$t('本月获得积分')}}</view>
			  <view style="font-weight: 500;width: 100%; height: 60rpx;line-height: 30rpx;" v-if="lang=='ru'">{{$t('本月获得积分')}}</view>
			  <view class="kuang_view">{{this_month||0}}</view>
		  </view>
		  <view style="margin-left: 9%;" class="kuang" :class="lang=='ru'?'f10':''">
			  <view style="font-weight: 500;width: 100%;height: 60rpx;line-height: 60rpx;">{{$t('累计总积分')}}</view>
			  <view class="kuang_view">{{leiji||0}}</view>
		  </view>
		  <view style="margin-left: 9%;" class="kuang" v-if="lang=='zh'" :class="lang=='ru'?'f10':''">
			  <view style="font-weight: 500;width: 100%;height: 60rpx;line-height: 60rpx;">{{$t('本月消耗积分')}}</view>
			  <view class="kuang_view">{{absolute(xiaohao)||0}}</view>
		  </view>
		  <view style="margin-left: 9%;" class="kuang" v-if="lang=='ru'" :class="lang=='ru'?'f10':''">
			  <view style="font-weight: 500;width: 100%;height: 60rpx;line-height: 60rpx;">{{$t('已提现积分')}}</view>
			  <view class="kuang_view">{{tx||0}}</view>
		  </view>
	  </view>
	  
	  
	  
      <!-- 积分使用明细 -->
      <p class="detail"> <span @click="xianshi(1)" :class="xianshi_flag==1?'hei':'hui'">{{ $t('积分明细') }}</span>    <span @click="xianshi(2)" :class="xianshi_flag==1?'hui':'hei'" style="margin-left: 30rpx;" v-if="lang=='ru'">{{$t('提现记录')}}</span> </p>
      <!-- 使用列表 -->
      <view class="use" v-if="xianshi_flag==1">
        <view v-if="list.length < 1" style="padding-top: 15%;">
          <u-empty :text="$t('没有数据')" mode="data"></u-empty>
        </view>
        <view class="use-list" v-else>
          <ol >
            <li v-for="(item,index) in list" :key="index" :class="index===list.length-1?'':'line'">
              <view>
                <view class="_flex">
                  <text class="use_span" v-if="item.lx==1">{{ $t("邀请注册") }}-
					<text v-if="lang!='ru'">{{item.name}}</text>
					<text v-if="lang=='ru'">{{item.name_ru}}</text>
				  </text>
				  <text class="use_span" v-else-if="item.lx==6">{{ $t("第一条发布") }}</text>
				  <text class="use_span" v-else-if="item.lx==7">{{ $t("第二条发布") }}</text>
				  <text class="use_span" v-else-if="item.lx==8">{{ $t("第三条发布") }}</text>
				  <text class="use_span" v-else-if="item.lx==9">{{ $t("第四条发布") }}</text>
				  <text class="use_span" v-else-if="item.lx==10">{{ $t("第五条发布") }}</text>
				  <text class="use_span" v-else>{{ $t(item.memo) }}</text>
				  <text class="use_span" style="font-size: 28rpx;font-weight: bolder;line-height: 50rpx;" v-if="item.lx==1||item.lx==6||item.lx==7||item.lx==8||item.lx==9||item.lx==10">
					<text v-if="lang!='ru'">{{item.username}}</text>
					<text v-if="lang=='ru'">{{item.username_ru}}</text>
				  </text>
                  <text class="time">
                    <text
                        style="margin-right: 10rpx;">{{ time("S", item.createtime) }}
                    </text>
                    <!--                    <text>{{ item.before }}</text>-->
                  </text>
                </view>
                <text class="money">{{ item.score }}</text>
              </view>
            </li>
          </ol>
          <!-- <view class="bottom" style="height: 78rpx;"></view> -->
        </view>
      </view>
	  
	  
	   <view class="use" v-if="xianshi_flag==2">
		   <view v-if="list2.length < 1" style="padding-top: 15%;">
		     <u-empty :text="$t('没有数据')" mode="data"></u-empty>
		   </view>
		   <view class="use-list" v-else>
		     <ol >
		       <li v-for="(item,index) in list2" :key="index" :class="index===list.length-1?'':'line'">
		         <view style="position: relative;">
		           <view class="_flex">
					   
		             <text class="use_span">{{ $t("提现积分") }}</text>
					 <text class="use_span" style="font-size: 28px;font-weight: blod;color: #FF5229;line-height: 40px;">{{ item.sqtx_score }}</text>

		             <text class="time">
		               <text
		                   style="margin-right: 10rpx;">{{ time("S", item.createtime) }}
		               </text>
		               <!--                    <text>{{ item.before }}</text>-->
		             </text>
					 
					 <view class="ppb" @click="lookas(item.id)"> {{ $t('查看详情') }}</view>
		           </view>
		           <view class="ppf" v-if="item.status==0" style="color: red;text-align: right; font-size: 12px;">{{ $t('待审核') }}</view>
				   <view class="ppf" v-if="item.status==1&&item.hk_status==0" style="color: orange;text-align: right; font-size: 12px;">{{ $t('待汇款') }}</view>
				   <view class="ppf" v-else-if="item.status==1&&item.hk_status==1" style="color: green;text-align: right; font-size: 12px;">{{ $t('已汇款') }}</view>
				   <view class="ppf" v-else-if="item.status==1&&item.hk_status==2" style="color: red;text-align: right; font-size: 12px;">{{ $t('汇款失败') }} </view>
				   <view class="ppf" v-if="item.status==2" style="color: red;text-align: right; font-size: 12px;">{{ $t('审核失败') }} </view>
		         </view>
		       </li>
		     </ol>
		     <!-- <view class="bottom" style="height: 78rpx;"></view> -->
		   </view>
		   
	    </view>
	  
    </view>
	
    <!-- 按钮 --> <!-- 站位，用于自适应 -->
    <view class="layout " v-if="is_shenqing==false">
      <view style="height: 2rpx; width: 100%;"></view>
      <u-button :custom-style="customStyle" hover-class="none" type="primary" @click="tobuy">{{ $t('获取积分') }}</u-button>
	  <view style="height: 22rpx; width: 100%;"></view>
    </view>
	
	
	<!--申请提现-->
	<u-popup v-model="is_shenqing" :width="'100%'" >
		<view class="tixian_shenqing" >
			
			<view class="xy-popup">
				<view @click="guanbi">⬅</view>
				
				<view style="width: 94%;margin: 0 auto;margin-top: 30rpx;box-shadow: 0 0 10px #ddd;background: #ffffff;padding: 10rpx 20rpx;border-radius: 20rpx;margin-bottom: 30rpx;position: relative;">
					<view style="padding-top: 10rpx; padding-bottom: 10rpx;font-size: 36rpx;">{{$t('可提现积分')}}</view>
					<view style="padding-top: 5rpx; padding-bottom: 5rpx;font-size: 48rpx; font-weight: bold; color: #FF5229;">{{points}}</view>
					<view style="padding-top: 10rpx; padding-bottom: 10rpx;font-size: 26rpx;">{{$t('申请提现积分')}}</view>
					<view style="border-bottom: 1px #ccc solid;"><input type="text" v-model="sqtx_score" :placeholder="$t('请输入数字')" style="font-size: 22rpx;padding-bottom: 10rpx;"></view>
					<view style="padding-top: 10rpx; padding-bottom: 10rpx;font-size: 22rpx; color: #999;">{{$t('提现规则')}}: 1{{$t('积分')}} = 1{{$t('卢布')}}</view>
				</view>
				
				<image :src="HTTP_IMG_UTL+'huikuan.png'" style="width: 80%;margin-top: 20rpx; margin-bottom: 20rpx; margin-left: 10%;" mode="widthFix"></image>
				
				<view style="width: 94%;margin: 0 auto;margin-top: 30rpx;box-shadow: 0 0 10px #ddd;background: #ffffff;padding: 10rpx 20rpx;border-radius: 20rpx;margin-bottom: 30rpx;position: relative;">
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 32rpx;">{{$t('银行名称')}}</view>
					<view style="border-bottom: 1px #ccc solid;"><input type="text" v-model="bank_name" :placeholder="$t('请输入银行名称')" style="font-size: 22rpx;padding-bottom: 10rpx;"></view>
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 32rpx;">{{$t('银行卡号')}}</view>
					<view style="border-bottom: 1px #ccc solid;"><input type="text" v-model="bank_card" :placeholder="$t('请输入卡号')" style="font-size: 22rpx;padding-bottom: 10rpx;"></view>
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 32rpx;">{{$t('收款人姓名')}}</view>
					<view style="border-bottom: 1px #ccc solid;"><input type="text" v-model="name" :placeholder="$t('请输入姓名')" style="font-size: 22rpx;padding-bottom: 10rpx;"></view>
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 32rpx;">{{$t('收款人手机号码')}}</view>
					<view style="border-bottom: 0px #ccc solid;"><input type="text" v-model="mobile" :placeholder="$t('请输入收款人手机号码')" style="font-size: 22rpx;padding-bottom: 10rpx;"></view>
				</view>
				<view style="height: 40rpx;width: 100%;"></view>
				<u-button :custom-style="customStyle" hover-class="none" type="primary" @click="pointsWithdrawal">{{ $t('提交申请') }}</u-button>
			</view>
			
		</view>
	</u-popup>
	
	<!--申请提现-->
	<u-popup v-model="is_chakan" :width="'100%'" >
		<view class="tixian_shenqing">
			
			<view class="xy-popup">
				<view @click="guanbi">⬅</view>
				
				<image :src="HTTP_IMG_UTL+'huikuan.png'" style="width: 80%;margin-top: 20rpx; margin-bottom: 20rpx; margin-left: 10%;" mode="widthFix"></image>
				
				<view style="width: 94%;margin: 0 auto;margin-top: 30rpx;box-shadow: 0 0 10px #ddd;background: #ffffff;padding: 10rpx 20rpx;border-radius: 20rpx;margin-bottom: 30rpx;position: relative;">
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 26rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('银行名称')}}</view>
					<view style="border-bottom: 1px #ccc solid;padding-left: 20rpx;padding-right: 20rpx;"><input type="text" v-model="bank_name" :placeholder="$t('请输入银行名称')" style="font-size: 22rpx;padding-bottom: 20rpx;"></view>
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 26rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('银行卡号')}}</view>
					<view style="border-bottom: 1px #ccc solid;padding-left: 20rpx;padding-right: 20rpx;"><input type="text" v-model="bank_card" :placeholder="$t('请输入卡号')" style="font-size: 22rpx;padding-bottom: 20rpx;"></view>
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 26rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('收款人姓名')}}</view>
					<view style="border-bottom: 1px #ccc solid;padding-left: 20rpx;padding-right: 20rpx;"><input type="text" v-model="name" :placeholder="$t('请输入姓名')" style="font-size: 22rpx;padding-bottom: 20rpx;"></view>
					<view style="padding-top: 40rpx; padding-bottom: 10rpx;font-size: 26rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('收款人手机号码')}}</view>
					<view style="border-bottom: 0px #ccc solid;padding-left: 20rpx;padding-right: 20rpx;"><input type="text" v-model="mobile" :placeholder="$t('请输入收款人手机号码')" style="font-size: 22rpx;padding-bottom: 20rpx;"></view>
				</view>
				
				<view style="width: 94%;margin: 0 auto;margin-top: 30rpx;box-shadow: 0 0 10px #ddd;background: #ffffff;padding: 10rpx 20rpx;border-radius: 20rpx;margin-bottom: 30rpx;position: relative;">
					<view style="padding-top: 20rpx; padding-bottom: 10rpx;font-size: 26rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('申请提现积分')}}</view>
					<view style="border-bottom: 1px #ccc solid;padding-top: 5rpx;padding-left: 20rpx;padding-right: 20rpx; padding-bottom: 5rpx;font-size: 40rpx; color: #FF5229;">{{info.sqtx_score}}</view>
					<view style="padding-top: 20rpx; padding-bottom: 10rpx;font-size: 26rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('汇款证明')}}</view>
					<view style="padding-top: 15rpx; padding-bottom: 15rpx;font-size: 40rpx;padding-left: 20rpx;padding-right: 20rpx; color: #FF5229; text-align: center;">
						<image :src="toImages(info.img)" style="width: 80%;" @click="ClickImage(toImages(info.img))" v-if="info.img"></image>
						<u-empty :text="$t('没有数据')" mode="data" v-else></u-empty>
					</view>
					<view style="padding-top: 20rpx; padding-bottom: 10rpx;font-size: 24rpx;padding-left: 20rpx;padding-right: 20rpx;">{{$t('汇款日期')}} : {{info.hk_time}}</view>
					
				</view>
			</view>
			
		</view>
	</u-popup>
	
  </view>
</template>
<script>
import Integral from '@/pages/user/element/element.vue'
import {time,isBase64} from "@/common/public";
import {
		HTTP_REQUEST_URL,
		HTTP_IMG_UTL,
		IMAGE_URL
	} from "@/config/app";
export default {
  data() {
    return {
	  sqtx_score:'',
	  bank_name:'',
	  bank_card:'',
	  name:'',
	  mobile:'',
	  HTTP_IMG_UTL,
      customStyle: {
        width: '356rpx',
        height: '83rpx',
        background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
        'border-radius': '26rpx',
      },
	  customStyle2: {
	    width: '356rpx',
	    height: '83rpx',
	    background: '#ffffff',
	    'border-radius': '26rpx',
	  },
      list: [],
	  list2:[
		{
			memo:'提现积分',
			createtime:'1723703235',
			score:'500',
			status:'0'
		},{
			memo:'提现积分',
			createtime:'1723703235',
			score:'500',
			status:'1'
		},{
			memo:'提现积分',
			createtime:'1723703235',
			score:'500',
			status:'2'
		},{
			memo:'提现积分',
			createtime:'1723703235',
			score:'500',
			status:'3'
		},{
			memo:'提现积分',
			createtime:'1723703235',
			score:'500',
			status:'4'
		}
		
	  ],
      points: 0,
      this_month: 0,
	  leiji: 0,
	  xiaohao: 0,
	  tx:0,
	  lang:getApp().globalData.lang,
	  xianshi_flag:1,
	  
	  is_shenqing:false,
	  is_chakan:false,
	  info:{},
	  tx_id:0,

    }
  },
  components: {
    Integral
  },
  onLoad() {
    this.getScoreTotals()
    this.getScoreLists()
	this.withdrawalRecordList()
	// this.withdrawalRecord()
  },
  onReady() {
        uni.setNavigationBarTitle({
            title: this.$t("我的积分")
        })
    },
	computed: {
		toImages() {
			return (src) => {
				return isBase64(src) ? src : IMAGE_URL + src
			}
		},
	},
  methods: {
	  absolute(a) {
		return Math.abs(a); 		
	  },
	ClickImage(PhotoAddress) {
	  uni.previewImage({
		  urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
		  current: '', // 当前显示图片的http链接，默认是第一个
		  success: function(res) {},
		  fail: function(res) {},
		  complete: function(res) {},
	  })
	},
    time,
    integral() {
      this.$u.route('/pages/user/my-integral/BuyPoints')
    },
	tixian_sq() {
	  this.is_shenqing = true
	  this.bank_name=''
	  this.bank_card=''
	  this.name=''
	  this.mobile=''
	},
	lookas(id){
	  console.log(id)
	  this.is_chakan = true
	  this.tx_id=id
	  this.$u.api.user.withdrawalRecord({
	  	id:this.tx_id,
	  }).then(res => {
	  	console.log(res)
	  	this.info = res
		this.bank_name=this.info.bank_name
		this.bank_card=this.info.bank_card
		this.name=this.info.name
		this.mobile=this.info.mobile
	  })
	},
	guanbi() {
	  this.is_shenqing = false
	  this.is_chakan = false
	},
	xianshi(i){
		this.xianshi_flag = i
	},
    tobuy() {
      this.$u.route('/pages/user/invitation/invitation')
    },
    //我的积分
    getScoreTotals() {
      this.$u.api.user.getScoreTotal().then(res => {
        this.points = res.total
        this.this_month = res.this_month
		this.leiji = res.leiji
		this.xiaohao = res.xiaohao
		this.tx = res.tx
      })
    },
    //积分统计
    getScoreLists() {
      this.$u.api.user.getScoreList().then(res => {
        console.log(res)
        this.list = res
      })
    },
	//提现记录列表
	withdrawalRecordList() {
	  this.$u.api.user.withdrawalRecordList(
	  ).then(res => {
		console.log(res)
		this.list2 = res
	  })
	},
	//提现记录
	withdrawalRecord(){
		this.$u.api.user.withdrawalRecord({
			id:this.tx_id,
		}).then(res => {
			console.log(res)
			this.info = res
		})
	},
	pointsWithdrawal(){
		if (this.points === 0) {
			this.$u.toast(this.$t('您暂时没有积分'), 2000)
			return false
		}
		if (this.sqtx_score === '') {
			this.$u.toast(this.$t('请输入数字'), 2000)
			return false
		}
		if (this.bank_name === '') {
			this.$u.toast(this.$t('请输入名称'), 2000)
			return false
		}
		if (this.bank_card === '') {
			this.$u.toast(this.$t('请输入卡号'), 2000)
			return false
		}
		if (this.name === '') {
			this.$u.toast(this.$t('请输入姓名'), 2000)
			return false
		}
		if (this.mobile === '') {
			this.$u.toast(this.$t('请输入手机号码'), 2000)
			return false
		}
		if(this.points<this.sqtx_score){
			this.$u.toast(this.$t('申请提现积分不能大于可提现积分'), 2000)
			return false
		}
		
		this.$u.api.user.pointsWithdrawal({
				font_score:this.points,
				sqtx_score:this.sqtx_score,
				bank_name:this.bank_name,
				bank_card:this.bank_card,
				name:this.name,
				mobile:this.mobile,	
			}).then(res => {
				console.log(res)
				this.is_shenqing=false;
				this.$u.toast(this.$t('操作成功'), 2000)
				this.getScoreTotals()
				this.getScoreLists()
				this.withdrawalRecordList()
		}).catch(err => {
			console.log(err)
		})
	}
  }
}
</script>
<style lang="scss" scoped>
page {
  height: 100vh;
  background-color: #f0f0f0;
}

.page_one {
  .detail {
    padding-left: 12rpx;
    font-size: 28rpx;

    font-weight: 500;
    color: rgba(0, 0, 0, 0.88);
    line-height: 38rpx;
    margin: 27rpx 0 40rpx 0;
  }

  .use {
    background: #FFFFFF;
    border-radius: 14rpx;
    min-height: 400rpx;
    .use-list {
      ol {
        list-style-type: none;
        padding: 0 20rpx 0 27rpx;
        //看需求，超出出滚动条
        height:50vh ;
        overflow: auto;

        li {
          view {
            padding-right: 1rpx;
            height: 200rpx;
            box-sizing: border-box;

            ._flex {
              width: 80%;
              display: flex;
              float: left;
              flex-direction: column;
              justify-content: center;

              .use_span {
                font-size: 24rpx;
                word-break: break-all;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.88);
                line-height: 35rpx;
              }


              .time {
                font-size: 24rpx;

                font-weight: 400;
                color: rgba(85, 85, 85, 0.88);
                line-height: 35rpx;
                margin-top: 5rpx;
              }
            }

            .money {
              font-size: 38rpx;

              font-weight: 600;
              color: #FF5229;
              line-height: 200rpx;
              float: right;
            }
          }
        }
      }
    }
  }
}

.line {
  border-bottom: 2rpx solid #EBEBEB;
}
.f10{
	font-size: 10px !important;
}
.hei{
	color: #000 !important; font-weight: bold; border-bottom: #FF5229 4px solid;
}
.hui{
	color: #999 !important;
}

.ppf{
	position: absolute; top: 20rpx; left: 50%;font-size: 14px; width: 48%;
}

.ppb{
	width: 30%; text-align: center; height: auto !important; color: #000; z-index: 9999; padding: 10px 5px; position: absolute; top: 60%; left: 70%; border: 1px #999999 solid; color: #999999; border-radius: 10rpx; font-size: 20rpx;
}

.kuang{
	width: 27%; position: relative; background-color: #fff;border-radius: 10rpx; text-align: center; padding: 10rpx;
}
.kuang_view{
	color: #FF5229;font-size: 40rpx; width: 100%; position: absolute; top: 60%; left: 0%; text-align: center; font-weight: bold;
}
.tixian_shenqing{
	width: 100%; background-color: #f2f2f2; height: 100vh; overflow-y: hidden;
}
.xy-popup {
	padding-top: 5px;
	margin-bottom: 80px;
	width: 100%;
	padding: 20rpx 20rpx 60rpx 20rpx;
}

.xy-popup-title {
	color: #DE2D11;
	text-align: center;
	font-weight: 500;
}


</style>
